<template>
    <div>
        <div style="width:500px;margin:0 auto">
                <el-form ref="form" :model="userObj" label-width="80px" >            
                    <el-form-item label="用户名:">
                        <el-input v-model="userObj.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input show-password v-model="userObj.pwd"></el-input>
                    </el-form-item>           
                    <el-form-item label="确认密码:">
                        <el-input show-password v-model="rePwd"></el-input>
                    </el-form-item>
                    <div id="imgs">
                            <el-form-item label="选择图片:" prop="facePath">
                                    <div class="demo-fit">
                                    <div class="block">
                                        <el-image style="width: 200px; height: 200px" :src="src"></el-image>
                                    </div>
                                    </div>
                                    <input style="margin-top:8px" type="file" @change="getFile($event)">
                                </el-form-item>
                            </div>    
                </el-form>
                
                <div id="btn">
                    <el-row>                   
                       <el-button type="success" round @click="checkPwd">注册</el-button>                  
                        <el-button type="info" plain  @click="dump">返回</el-button>
                    </el-row>
                </div>
        </div>
   </div>
</template>

<script>
export default {
    data(){
        return{
            userObj:{},
            rePwd:"",
            src:''
        }
    },
    methods:{
        dump(){
            this.$router.push("/login");
        },
        checkPwd(){
            if(this.rePwd != this.userObj.pwd){
                 this.$message.error('密码不一致哦');
            }else{
                this.registe();
            }
        },
        async registe(){
            
            var info =  await this.ajax.uploadSubmit("/project/users/add",{name:this.userObj.name,
                                                                        pwd:this.userObj.pwd,
                                                                       file:this.userObj.facePath});
            // alert(info.data);
            if(info.data == "ok"){
                // console.log(info);
                this.$message({
                    message: '注册成功',
                    type: 'success'
                });
                this.$router.push("/login");
            }
        },
        getFile(event){
        //得到 文件表单的dom对象
         this.userObj.facePath = event.target.files[0];
        //  alert(event.target.files[0]);
         event.preventDefault();
         this.filePreview(event);
        },
        filePreview(e){
            let _this = this
            var files = e.target.files[0]
            // alert(files);
            if (!e || !window.FileReader) return  // 判断是否支持FileReader
            let reader = new FileReader()
            reader.readAsDataURL(files) // 文件转换
            reader.onloadend = function () {
                _this.src = this.result
                _this.textHide=false;
            }
        }
    }
}
</script>

<style>

</style>